<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<h2>当前的n是{{n}}</h2>
			<button @click="n++">点我+1</button>
			<!-- 使用v-show做条件渲染 -->
			<!-- <h2 v-show="false">我叫{{name}}</h2>
			<h2 v-show="1===1">我叫{{name}}</h2> -->
			
			<!-- 使用v-if做条件渲染 -->
			<!-- <h2 v-if="false">我叫{{name}}</h2> -->
			<!-- <h2 v-if="1===1">我叫{{name}}</h2> -->
			
			<!-- <div v-show="n==1">angular</div>
			<div v-if="n==2">react</div>
			<div v-if="n==3">Vue</div> -->
			
			<!-- <div v-if="n==1">angular</div>
			<div v-else-if="n==2">react</div>
			<div v-else>Vue</div> -->
			
			<template v-show="n==1">
				<h2 v-show="n==1">你好</h2>
				<h2 v-show="n==1">邹宜臻</h2>
				<h2 v-show="n==1">老八</h2>
			</template>
		</div>
		<script type="text/javascript">
			const vm=new Vue({
				el:'#root',
				data:{
					name:'邹宜臻',
					n:0
				}
			})
		</script>
	</body>
</html>
